<template>
	<view class="page">
 
		
		<!-- 搜索头部导航 -->
		<search-menu @clicksearch="clicksearch" title="豫见电商" searchText="搜索商品" :disabled="true"></search-menu>

		<!-- swiper轮播图 -->
	
			<my-swiper @clickSwiperItem="clickSwiper" :swiperList="swiperListValue" ></my-swiper>
 

		<!-- 九宫格 -->
		<view class="list-menu"><list-menu :listData="listMenuData" @selectItem="selectItem"></list-menu></view>

		<!-- 跑马灯 -->
		<div class="paomadeng">
			<view class="left-title">
						<text>最新</text><text>活动</text>
			</view>
	
			<view class="paomadeng-wrapper">
				<uni-notice-bar scrollable="true" :speed=speedValue  showIcon="true" @getmore="getMore" showGetMore="true" single="true"  :text="textValue"></uni-notice-bar>

			</view>
			</div>
			
			<!-- 商品列表 -->
			<view class="shop-list">
				<shop-wrapper :shopData="shopData" @clickItem="clickShopItem"></shop-wrapper>
			</view>
			
			<!-- 返回顶部按妞 -->
			<view class="goback">
				<go-back @goback="clickGoback" :isshow="isshowGoback"></go-back>
			</view>
			
			<view class="dixian">
				<dixian :titles="dixianText" ></dixian>
			</view>
	</view>
</template>

<script>
import searchMenu from '../../components/searchMenu/searchMenu.vue'; //搜索框

import listMenu from '../../components/listMenu/listMenu.vue'; //九宫格

import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue' //通告跑马灯

import mySwiper from '../../components/my-swiper/my-swiper.vue'  //引入color ui 的 swiper

import shopWrapper from '../../components/shop-wrapper/shop-wrapper.vue';  //商品容器

import goBack from '../../components/go-back/go-back.vue'  //引入返回顶部按钮

import dixian from '../../components/dixian/dixian.vue'  //引入底线



export default {
	components: { searchMenu, listMenu ,uniNoticeBar,mySwiper,shopWrapper,goBack,dixian},
	data() {
		return {
			listMenuData: [] ,//九宫格数据
			textValue:'',  //跑马灯内容
			speedValue:20, //跑马灯速度
			swiperListValue:[], //轮播图数据
			isshowGoback:false,  //是否显示返回顶部
			shopData:[],
			dixianText:"我可是有底线的",
			page:1,
			limit:10,
		};
	},
	onLoad() {

		
		//先用模拟数据
		this.swiperListValue = this.$request.mock.swiperList;  //获取轮播图数据
		this.listMenuData = this.$request.mock.listMenu;
		this.textValue = "豫见商城正式上线了。。";

		this.shopData = this.$request.mock.shopData;
		
		// this.getIndexData();
		//获取热门商品数据
		// this.getHotGoods();
	 
		
		uni.setTabBarBadge({
			index:2,
			text:"1"
		})
		
	},
	//页面滚动
	onPageScroll(e){
		// console.log(e);
		// this.changeNavStyle(e);// 修改导航栏样式
		
		this.isShowGobackMenu(e) //显示返回顶部按钮
	},
	//下拉刷新
	onPullDownRefresh() {
		
		this.page = 1;
		this.shopData = []; //下拉清空商品
		this.getHotGoods()  //获取
		setTimeout(function(){
			uni.stopPullDownRefresh()
		},1000)
	},
	//页面滚动到底部
	onReachBottom(){
		
		this.page ++;
		// this.getHotGoods()
	},
	
	methods: {
		//点击搜索菜单
		clicksearch(e) {
			console.log(e);
			this.$request.msg(e);
			if (e === 'search'){
				uni.navigateTo({
					url:'../search/search'
				})
			}
			
		
		},
		//点击轮播图
		clickSwiper(e) {
			console.log(e);
			this.$request.msg(e.id + '');
		},

		//点击九宫格
		selectItem(e) {
			console.log(e);
			this.$request.msg(e.title);
			setTimeout(function(){
				uni.navigateTo({
					url:'../goodslist/goodslist'
				})
			},1000)
		},
		//点击跑马灯更多
		getMore(){
			this.$request.msg('查看更多消息');
		},
	
		//修改导航栏nav
		changeNavStyle(e){
			if (e.scrollTop > 200){
				uni.setNavigationBarColor({
					frontColor:"#ffffff",
					backgroundColor:"rgb(235,235,235,.8)",
					animation:{
						duration:5,
						timingFunc:'easeInOut'
					}
				})
			}else{
				uni.setNavigationBarColor({
					frontColor:"#000000",
					backgroundColor:"#0081FF",
					animation:{
						duration:5,
						timingFunc:'easeInOut'
					}
				})
			}
		},
		//监听页面滚动距离，如果到800 就显示返回顶部按钮
		isShowGobackMenu(e){
		 
			if(e.scrollTop > 800){
				
				this.isshowGoback = true;
			}else{
				this.isshowGoback = false
			}
		},
		
		//点击返回顶部
		clickGoback(){
			console.log("点击了 返回顶部");
			uni.pageScrollTo({
				scrollTop:0,
				duration:400
			})
		},
		//点击商品
		clickShopItem(e){
			console.log(e);
			this.$request.msg(e.title)
			uni.navigateTo({
				url:'../goodsInfo/goodsInfo?id=' + e.id
			})
		},
		//获取热门商品
		getHotGoods(){
			uni.showLoading({
				title:'数据加载中',
				mask:true
			})

			this.$request.api.goods.hotGoods({
				page:this.page,
				limit:this.limit
			}).then(res=>{	
				if(res.data.status === 200){
					if(res.data.data.length !== 0){
						this.shopData = this.shopData.concat(res.data.data)
					}else{
						this.$request.msg('到底了。')
					}
				}
				
			}).catch(err=>{})
			uni.hideLoading()
		},
		//获取首页轮播图等数据
		getIndexData(){
			this.$request.api.goods.getIndex().then(res=>{
				if(res.data.status === 200){
					this.swiperListValue = res.data.data.banner //轮播图
					 
					this.listMenuData = res.data.data.menus //九宫格
						console.clear()
					let paomadengData = res.data.data.roll;
					let i = 1;
					let maxleng = paomadengData.length;

					this.textValue = paomadengData[0].info;
					
					setInterval(()=>{
						if(i == maxleng){
							i = 0
						}
						this.textValue = paomadengData[i].info;
						
						i++;
					},10000);
				}
			}).catch(err=>{
				
			})
		}
		
		
	}
};
</script>

<style>
	/* 自定义导航栏 */
.nav .cu-custom .cu-bar{
	height: 45px;
}
	
/* 轮播图 start */
 

/* 轮播图end */

/* 跑马灯start */
.paomadeng{
	box-sizing: border-box;
	margin-top: 20rpx;
	/* border-top: 1rpx solid #c7c7c7; */
	/* border-bottom: 1rpx solid #c7c7c7; */
	 
	background-color: #FFFFFF;
	/* height: 120rpx; */
	display: flex;
	justify-content: center;
	align-items: baseline;
	
}
.p20{
	padding: 0 40rpx;
}
.paomadeng .left-title text{
	font-weight: bold;
	font-size: 40rpx;
	color: #333333;
	font-style: italic;
		vertical-align: middle;
		flex: 1;
}
.paomadeng .left-title text:nth-child(2){
	color: #0081FF;
 
	font-style: italic;
	
}
 
.paomadeng-wrapper{
	width: 50%;
	flex: 4;
	margin-left: 20rpx;
 
}
.uni-noticebar{
	height: 70rpx;
}
/* 跑马灯end */


/* 底线start */
	.dixian{
		margin: 40rpx 0;
	}
/* 底线end */
</style>
